<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<script src="js/libs/charts/echarts-all.js"></script>
<style>
<!--
.fixed {
	position: fixed;
}

#searchTable  .J_valueList {
	display: inline-block;
}

#searchTable .J_valueList li {
	float: left
}

#dvFrameMainNav {
	overflow: auto;
	border: 1px solid #ddd;
	border-top: 2px solid #999;
}

.crumbs-nav-item .selector-set {
	float: left;
	margin-right: 5px;
}

.selector-set {
	font-size: 0;
}

.selector-set .ss-item {
	position: relative;
	display: inline-block;
	line-height: 22px;
	border: 1px solid #DDD;
	font-size: 12px;
	vertical-align: top;
	margin: 0 5px 5px 0;
	padding: 0 26px 0 4px;
	cursor: pointer;
}

.selector-set .ss-item em {
	color: #e4393c;
}

.selector-set .ss-item i {
	display: block;
	position: absolute;
	width: 25px;
	height: 22px;
	right: 0;
	top: 0;
	background: url('img/search_ele.png') no-repeat 7px -140px;
}

.selector-set .ss-item-const {
	padding-right: 5px;
}

.selector-set .ss-item-const i {
	background: none !important;
}

.selector-set .ss-item b {
	font-weight: 400;
}

.selector-set .ss-item:hover {
	border-color: #e4393c;
	text-decoration: none
}

.selector-set .ss-item:hover i {
	background-color: #e4393c;
	background-position: 7px -158px
}

.form-table .td1 {
	width: 120px;
}

.form-table .td2 {
	
}

.form-table .td3 {
	width: 70px;
}

.btn {
	display: inline-block;
	line-height: 14px;
	height: 14px;
	border-radius: 2px;
	background: #F7F7F7;
	text-align: center;
	text-decoration: none;
	cursor: pointer
}

.btn:hover {
	text-decoration: none;
	box-shadow: 0 1px 1px rgba(0, 1, 1, .08);
	cursor: pointer
}

.btn-default {
	display: inline-block;
	line-height: 14px;
	height: 14px;
	border-radius: 2px;
	background: #F7F7F7;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid #DDD;
	padding: 4px 13px 5px;
	color: #666;
	background-color: #f7f7f7;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f7f7f7, #f2f2f2);
	background-image: -webkit-linear-gradient(top, #f7f7f7, #f2f2f2);
	background-image: -o-linear-gradient(top, #f7f7f7, #f2f2f2);
	background-image: linear-gradient(top, #f7f7f7, #f2f2f2);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',
		endColorstr='#f2f2f2', GradientType=0)
}

.btn-default:hover {
	text-decoration: none;
	box-shadow: 0 1px 1px rgba(0, 1, 1, .08);
	cursor: pointer;
	color: #666
}

.btn-primary {
	display: inline-block;
	line-height: 14px;
	height: 14px;
	border-radius: 2px;
	background: #F7F7F7;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	padding: 5px 15px 6px;
	color: #FFF;
	background-color: #E74649;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #E74649, #DF3033);
	background-image: -webkit-linear-gradient(top, #E74649, #DF3033);
	background-image: -o-linear-gradient(top, #E74649, #DF3033);
	background-image: linear-gradient(top, #E74649, #DF3033);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E74649',
		endColorstr='#DF3033', GradientType=0)
}

.btn-primary:hover {
	text-decoration: none;
	box-shadow: 0 1px 1px rgba(0, 1, 1, .08);
	cursor: pointer;
	color: #FFF
}

.btn.disabled {
	padding: 4px 13px 5px;
	border: 1px solid #DDD;
	background: #FFF;
	cursor: default;
	color: #CCC;
	opacity: .2;
	filter: alpha(Opacity = 
		                                                                                       
		 20);
	filter: alpha(Opacity = 
		                                                                                       
		 20)
}

.btn.disabled:hover {
	color: #CCC
}

.btn-XL {
	height: 19px;
	line-height: 19px
}

.selector .s-title {
	border-bottom: 1px solid #DDD;
	background: #F1F1F1;
	line-height: 34px;
	height: 34px;
	overflow: hidden;
	zoom: 1
}

.selector .s-title h3 {
	float: left;
	padding-left: 10px
}

.selector .s-title h3 b {
	color: #e4393c;
	margin-right: 5px
}

.selector .s-title .st-ext {
	float: left;
	padding-left: 20px
}

.selector .s-brand, .selector .s-line {
	width: auto;
	height: auto
}

.selector .sl-wrap {
	position: relative;
	_zoom: 1;
	line-height: 34px;
	border-bottom: 1px solid #DDD
}

.selector .s-line:after {
	content: ' ';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden
}

.selector .sl-key {
	float: left;
	width: 100px;
	padding-left: 10px
}

.selector .sl-value {
	margin-left: 110px;
	padding-right: 130px;
	padding-left: 10px;
	overflow: hidden;
	zoom: 1
}

.selector .sl-ext {
	position: initial;
	margin: 0px auto;
	right: 5px;
	width: 55px;
	height: auto;
	line-height: 22px;
	overflow: hidden;
	zoom: 1
}

.selector .sl-ext .sl-e-more i, .selector .sl-ext .sl-e-multiple i {
	background: url(img/search_ele.png) no-repeat 9999px 9999px;
	-webkit-transition: background-position .15s ease-in-out;
	-moz-transition: background-position .15s ease-in-out;
	transition: background-position .15s ease-in-out
}

.selector .sl-ext .sl-e-more {
	float: left;
	margin-right: 20px;
	position: relative;
	width: 50px;
	height: 22px;
	background: #fff;
	visibility: hidden;
	color: #333
}

.selector .sl-ext .sl-e-more i {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid #DDD;
	background-position: 4px 7px
}

.selector .sl-ext .sl-e-more:hover {
	text-decoration: none;
	color: #e4393c
}

.selector .sl-ext .sl-e-more:hover i {
	border-color: #e4393c;
	background-position: 4px -11px
}

.selector .sl-ext .sl-e-more.opened i {
	background-position: 4px -27px
}

.selector .sl-ext .sl-e-more.opened:hover i {
	background-position: 4px -45px
}

.selector .sl-ext .sl-e-multiple {
	float: left;
	height: 20px;
	line-height: 20px;
	border: 1px solid #DDD;
	padding: 0 3px 0 18px;
	position: relative;
	background: #fff;
	color: #333
}

.selector .sl-ext .sl-e-multiple i {
	position: absolute;
	display: block;
	font-style: normal;
	left: 3px;
	top: 0;
	width: 13px;
	height: 20px;
	background-position: 0 -63px
}

.selector .sl-ext .sl-e-multiple:hover {
	text-decoration: none;
	color: #e4393c;
	border-color: #e4393c
}

.selector .sl-ext .sl-e-multiple:hover i {
	background-position: 0 -84px
}

.selector .sl-btns {
	display: none;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px
}

.selector .sl-btns .btn-primary {
	margin-right: 8px
}

.selector .sl-v-list {
	overflow: hidden;
	zoom: 1;
	padding-top: 0px
}

.selector .sl-v-list ul {
	float: left;
	overflow: visible;;
	zoom: 1;
	position: relative;
}

.selector .sl-v-list li {
	float: left;
	_display: inline;
	margin-bottom: 1px;
	height: 22px;
	line-height: 22px;
	width: 96px;
}

.selector .sl-v-list li a {
	float: left;
	white-space: nowrap;
	zoom: 1;
	color: #005aa0;
}

.selector .sl-v-list li a:hover {
	text-decoration: none;
	color: #e4393c
}

.selector .sl-v-list .sl-price {
	float: left;
	margin-bottom: 4px;
	margin-top: 2px
}

.selector .sl-v-list .sl-price .btn, .selector .sl-v-list .sl-price .input-txt,
	.selector .sl-v-list .sl-price em {
	float: left
}

.selector .sl-v-list .sl-price .input-txt {
	width: 38px;
	padding: 1px
}

.selector .sl-v-list .sl-price em {
	line-height: 21px;
	padding: 0 3px;
	color: #CCC
}

.selector .sl-v-list .sl-price .btn {
	margin-left: 5px;
	*display: inline;
	padding: 2px 10px 3px
}

.selector .sl-v-logos ul {
	padding-top: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	zoom: 1;
	height: 50px
}

.selector .sl-v-logos li {
	float: left;
	_display: inline;
	width: 116px;
	height: 48px;
	padding: 0;
	border: 1px solid #DDD;
	margin: -1px -1px 0 0;
	background: #FFF;
	text-align: center
}

.selector .sl-v-logos li a {
	display: block;
	border: 1px solid #FFF;
	height: 46px;
	width: 114px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	zoom: 1;
	color: #005aa0;
	line-height: 48px
}

.selector .sl-v-logos li a img {
	margin: 5px 6px;
	vertical-align: top
}

.selector .sl-v-logos li a:hover {
	text-decoration: none;
	color: #e4393c
}

.selector .sl-v-logos li a:hover img {
	display: none;
	_display: block;
	_margin: 0;
	_padding: 5px 6px
}

.selector .sl-v-logos li.selected, .selector .sl-v-logos li:hover {
	position: relative;
	z-index: 5;
	border-color: #e4393c;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .12)
}

.selector .sl-v-logos li.selected a, .selector .sl-v-logos li:hover a {
	border-color: #e4393c
}

.selector .sl-v-logos li.selected i {
	display: block;
	position: absolute;
	right: -2px;
	bottom: -1px;
	width: 10px;
	height: 10px;
	background: url(img/search_ele.png) no-repeat -2px -183px
}

.selector .sl-v-logos .v-fixed {
	height: 99px
}

.selector .sl-v-color {
	overflow: hidden;
	zoom: 1;
	height: 34px
}

.selector .sl-v-color ul {
	zoom: 1
}

.selector .sl-v-color li {
	float: left;
	_display: inline;
	margin-right: 10px;
	height: 28px;
	padding-top: 7px
}

.selector .sl-v-color li a {
	float: left;
	width: 20px;
	height: 20px;
	position: relative;
	overflow: hidden
}

.selector .sl-v-color li a b {
	display: block;
	width: 18px;
	height: 18px;
	border: 1px solid #ddd
}

.selector .sl-v-color li a i {
	display: none;
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 10px;
	height: 10px;
	background: url(img/search_ele.png) no-repeat -2px -183px
}

.selector .sl-v-color li a.black b {
	border-color: #333;
	background-color: #333
}

.selector .sl-v-color li a.light-gray b {
	border-color: #bbb;
	background-color: #bbb
}

.selector .sl-v-color li a.white b {
	border-color: #ddd;
	background-color: #fff
}

.selector .sl-v-color li a.pink b {
	border-color: #FFD8D8;
	background-color: #FFD8D8
}

.selector .sl-v-color li a.red b {
	border-color: red;
	background-color: red
}

.selector .sl-v-color li a.rose-red b {
	border-color: #FF028B;
	background-color: #FF028B
}

.selector .sl-v-color li a.purple b {
	border-color: #B237F1;
	background-color: #B237F1
}

.selector .sl-v-color li a.blue b {
	border-color: #2A8CFA;
	background-color: #2A8CFA
}

.selector .sl-v-color li a.green b {
	border-color: #17BC32;
	background-color: #17BC32
}

.selector .sl-v-color li a.orange b {
	border-color: #FF8A00;
	background-color: #FF8A00
}

.selector .sl-v-color li a.yellow b {
	border-color: #fc0;
	background-color: #fc0
}

.selector .sl-v-color li a.brown b {
	border-color: #814312;
	background-color: #814312
}

.selector .sl-v-color li a.light-tan b {
	border-color: #C69C81;
	background-color: #C69C81
}

.selector .sl-v-color li a.flesh-color b {
	border-color: #F3DCC9;
	background-color: #F3DCC9
}

.selector .sl-v-color li a.multi-color b {
	width: 20px;
	height: 20px;
	border: 0 none;
	background:
		url(//misc.360buyimg.com/product/list/1.0.4/css/i/search.icons.png)
		no-repeat 0 -146px
}

.selector .sl-v-color li.selected a b {
	border: 2px solid #e4393c;
	width: 16px;
	height: 16px
}

.selector .sl-v-color li.selected a i {
	display: block
}

.selector .sl-v-color li.selected a.multi-color b {
	background-position: -2px -148px
}

.selector .sl-b-letter {
	display: none;
	float: left;
	overflow: hidden;
	zoom: 1;
	padding-top: 6px;
	margin-bottom: 10px
}

.selector .sl-b-letter li {
	float: left;
	height: 20px;
	line-height: 20px;
	border: 1px solid #FFF;
	padding: 0 3px;
	cursor: default;
	text-align: center;
	color: #005aa0
}

.selector .sl-b-letter li.curr, .selector .sl-b-letter li:hover {
	border-color: #e4393c;
	color: #e4393c
}

.selector .sl-b-selected {
	overflow: hidden;
	zoom: 1;
	display: none
}

.selector .sl-b-selected .sl-b-key, .selector .sl-b-selected .sl-v-list
	{
	float: left
}

.selector .sl-b-search {
	display: none;
	float: left;
	width: 188px;
	height: 23px;
	border: 1px solid #ccc;
	margin-top: 5px;
	margin-left: 5px
}

.selector .sl-b-search i {
	float: left;
	width: 22px;
	height: 23px;
	background:
		url(//misc.360buyimg.com/product/list/1.0.4/css/i/search.icons.png)
		no-repeat 3px -117px
}

.selector .sl-b-search .input-txt {
	float: left;
	border: 0 none;
	width: 158px
}

.selector .sl-b-search .placehoder {
	color: #999
}

.selector .extend .sl-v-color ul, .selector .extend .sl-v-list ul,
	.selector .extend .sl-v-logos ul, .selector .multiple .sl-v-color ul,
	.selector .multiple .sl-v-list ul, .selector .multiple .sl-v-logos ul {
	height: auto
}

.selector .multiple {
	margin-top: -1px;
	border: 2px solid #edd28b;
	background: #fffdee
}

.selector .multiple .sl-key {
	padding-left: 8px
}

.selector .multiple .sl-value {
	margin-left: 108px;
	background: #fff
}

.selector .multiple .sl-ext {
	right: 8px
}

.selector .multiple .sl-e-more {
	visibility: hidden
}

.selector .multiple .sl-btns {
	display: block
}

.selector .multiple .sl-v-list li {
	
}

.selector .multiple .sl-v-list li a {
	position: relative;
	padding-left: 18px
}

.selector .multiple .sl-v-list li a i {
	position: absolute;
	left: 0;
	top: 3px;
	background: url(img/search_ele.png) no-repeat 9999px 9999px;
	display: inline-block;
	height: 12px;
	width: 12px;
	background-color: #fff;
	border: 1px solid #ccc;
	font-size: 0
}

.selector .multiple .sl-v-list li a:hover i {
	border-color: #e4393c
}

.selector .multiple .sl-v-list li.selected a i {
	border-color: #e4393c;
	background-position: -1px -107px
}

.selector .s-brand {
	_position: relative
}

.selector .s-brand .sl-v-list li {
	width: 130px;
	margin-right: 5px
}

.selector .s-brand .sl-v-list li a {
	width: 130px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.selector .s-brand .sl-v-list .v-fixed {
	height: 60px
}

.selector .s-brand .extend, .selector .s-brand .multiple {
	margin-top: -1px;
	border: 2px solid #AAA;
	background: #f9f9f9
}

.selector .s-brand .extend .sl-b-letter, .selector .s-brand .multiple .sl-b-letter
	{
	display: block
}

.selector .s-brand .extend .sl-b-search, .selector .s-brand .multiple .sl-b-search
	{
	display: block;
	*display: inline
}

.selector .s-brand .extend .sl-key, .selector .s-brand .multiple .sl-key
	{
	padding-left: 8px
}

.selector .s-brand .extend .sl-value, .selector .s-brand .multiple .sl-value
	{
	margin-left: 108px;
	background: #fff
}

.selector .s-brand .extend .sl-ext, .selector .s-brand .multiple .sl-ext
	{
	right: 8px
}

.selector .s-brand .extend .sl-v-list, .selector .s-brand .multiple .sl-v-list
	{
	margin-bottom: 10px
}

.selector .s-brand .extend .sl-v-list .v-fixed, .selector .s-brand .multiple .sl-v-list .v-fixed
	{
	*width: 100%;
	height: 150px;
	overflow-x: hidden;
	overflow-y: auto
}

.selector .s-brand .extend .sl-v-logos .v-fixed, .selector .s-brand .multiple .sl-v-logos .v-fixed
	{
	overflow-y: auto;
	overflow-x: hidden;
	padding-top: 1px;
	height: 196px
}

.selector .s-brand .extend .sl-v-list.brand-selected, .selector .s-brand .multiple .sl-v-list.brand-selected
	{
	height: 34px
}

.selector .s-brand .extend .sl-v-list.brand-selected li, .selector .s-brand .multiple .sl-v-list.brand-selected li
	{
	width: auto;
	margin-right: 10px
}

.selector .s-brand .extend .sl-v-list.brand-selected li a, .selector .s-brand .multiple .sl-v-list.brand-selected li a
	{
	width: auto
}

.selector .s-brand .multiple {
	border: 2px solid #edd28b;
	background: #fffdee
}

.selector .s-brand .multiple .sl-v-list li a {
	width: 112px;
	padding-left: 18px
}

.selector .s-category .sl-v-list {
	*position: relative
}

.selector .s-category .sl-v-list li {
	width: 130px;
	margin-right: 5px
}

.selector .s-category .sl-v-list li a {
	width: 130px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.selector .s-category .sl-v-list .v-fixed {
	height: 30px;
	*width: 100%
}

.selector .s-category .extend {
	margin-top: -1px;
	border: 2px solid #AAA;
	background: #f9f9f9
}

.selector .s-category .extend .sl-key {
	padding-left: 8px
}

.selector .s-category .extend .sl-value {
	margin-left: 108px;
	background: #fff
}

.selector .s-category .extend .sl-ext {
	right: 8px
}

.selector .s-category .extend .sl-v-list .v-fixed {
	overflow-x: hidden;
	overflow-y: auto;
	height: 150px
}
-->
</style>

<script type="text/javascript">
	var linkTemplate = '<a id="{id}" name="{id}" data-id="{id}" data-value="{dvalue}" class="ss-item" onclick="removeSearchCondition(\'{id}\')"><b>{namelabel}</b><em>{nametext}</em><i></i></a>';

	var linkTemplateConst = '<a id="{id}" name="{id}" data-id="{id}" data-value="{dvalue}" class="ss-item ss-item-const" ><b>{namelabel}</b><em>{nametext}</em><i></i></a>';

	var aTemplate = '<li><a onclick="changeSearchCondition(\'{id}\',this)" data-value="{dvalue}" data-label="{dlabel}" href="javascript:void(0)">{namelabel}<i></i></a></li>';

	function renderTemplate(trid, namelabel, nametext, dvalue) {
		return linkTemplate.replaceAll("{id}", "d" + trid).replaceAll("{dvalue}", dvalue).replaceAll("{namelabel}", namelabel).replaceAll("{nametext}", nametext);

	}

	function renderTemplateConst(trid, namelabel, nametext, dvalue) {
		return linkTemplate.replaceAll("{id}", "d" + trid).replaceAll("{dvalue}", dvalue).replaceAll("{namelabel}", namelabel).replaceAll("{nametext}", nametext);

	}

	function renderATemplate(trid, namelabel, dlabel, dvalue) {
		return aTemplate.replaceAll("{id}", trid).replaceAll("{dvalue}", dvalue).replaceAll("{namelabel}", namelabel).replaceAll("{dlabel}", dlabel);

	}

	function reloadGrid() {
		var url = "";
		var cdate = $(".selector-set a");

		$(cdate).each(function(index, item) {
			var $this = $(item);
			url += "&" + $this.data("id") + "=" + $this.data("value");
		});

		url = encodeURI(url);
		reloadSearchPanel(url);
		incidentSearchGrid.jqGrid.setGridParam({
			url : "incident/search/analysisList?projectId=${projectId}" + url
		});
		incidentSearchGrid.search();
	}

	function reloadSearchPanel(url) {
		isperp.showLoading();
		$.get("incident/search/reloadQueryPanelData?projectId=${projectId}" + url, function(data) {
			isperp.hideLoading();
			generalAlink(data.confirmtimeman_name, "tr2");
			generalAlink(data.supporter_name, "tr3");
			generalAlink(data.incident_type, "tr4");

			generalAlink(data.priority_name, "tr5");
			generalAlink(data.status, "tr6");
			generalAlink(data.sla_status, "tr7", 2);
			return data;
		})
	}

	function generalAlink(data, trid) {
		if (data) {
			var typeh = "";
			for ( var key in data) {
				var ahtml = renderATemplate(trid, data[key].label + "(" + data[key].count + ")", data[key].label, key);
				typeh += ahtml;
			}
			$("#" + trid + " .J_valueList").html(typeh);
		} else {
			$("#" + trid + " .J_valueList").html("");
		}
	}

	function changeSearchConditionByTree(event, treeId, treeNode) {

		var h;
		if ("departmentTree" == treeId) {
			h = renderTemplate("scl1", "IS部：", treeNode.name, treeNode.id);
		} else if ("departmentTree2" == treeId) {
			h = renderTemplate("scl2", "供应商：", treeNode.name, treeNode.id);
		} else {
			h = renderTemplate("scl3", "系统：", treeNode.name, treeNode.id);
		}
		$("#scl1").html(h);
		reloadGrid();
	}

	function changeSearchConditionByDate(obj, t) {
		var v = obj.value;

		var y = $("#idYear").val(), m = $("#idMonth").val(), d = $("#idDay").val(), label, name;

		if (d) {
			label = y + "年" + m + "月" + d + "日";
			name = y + "-" + m + "-" + d;
		} else {
			label = y + "年" + m + "月";
			name = y + "-" + m;
		}

		var h = renderTemplateConst("tr1", "请求日期", label, name, name);

		$("#sctr1").html(h);

		reloadGrid();
	}

	function removeSearchCondition(id) {
		$(".selector-set #" + id).remove();
		reloadGrid();
	}

	function changeSearchCondition(trid, obj) {
		var $tr = $("#searchTable #" + trid), namelabel = $tr.find(".td1").text(), $obj = $(obj), nametext = $obj.data("label"), v = $obj.data("value");

		//判断是否进行了选择操作
		var $td2 = $("#searchTable #" + trid + " .td2"), mu = $td2.hasClass("multiple");

		if (mu) {
			var pli = $obj.parent();
			if (pli.hasClass("selected")) {
				pli.removeClass("selected");
			} else {
				pli.addClass("selected");
			}

			if ($td2.find(".selected").length > 0) {
				if ($tr.find(".J_btnsConfirm").hasClass("disabled")) {
					$tr.find(".J_btnsConfirm").removeClass("disabled");
				}
			} else {
				$tr.find(".J_btnsConfirm").addClass("disabled");
			}

		} else {

			$("#sc" + trid).html(renderTemplate(trid, namelabel, nametext, v));

			reloadGrid();
		}
	}

	function changeSearchConditionConst(trid, obj) {
		var namelabel = $("#searchTable #" + trid + " .td1").text(), nametext = $(obj).data("label"), v = $(obj).data("value");

		$("#sc" + trid).html(renderTemplateConst(trid, namelabel, nametext, v));

		reloadGrid();
	}

	function incidentGridActions(rowObject) {
		return isperp.createGridAction({
			title : '转重要事件处理流程',
			iconCls : 'icon-change',
			onclick : "isperp.workflow.transferAssignee('" + rowObject.process_id + "')"
		});

	}
</script>
<div id="dvFrameMainNav" class="frame-main-nav">


	<isperp:tree id="departmentTree3" modal="false">
		<isperp:async enable="true"
			url="incident/incident/majorAnalysis/getCategoryTree?showAll=0">
		</isperp:async>
		<isperp:callback onClick="changeSearchConditionByTree"></isperp:callback>
	</isperp:tree>



</div>
<section id="mainContent" class="frame-main-cont frame-main-cont-first"
	style="top:5px" role="main">
	<div style="float:left;line-height: 25px;font-size: 14px;;color:#666">查询条件：</div>
	<div class="selector-set">
		<span id="sctr1"> <a id="dtr1" name="dtr1" data-id="dtr1"
			data-value="3" class="ss-item"
			onclick="removeSearchCondition('dtr1')"><b>请求日期：</b><em>2016年11月4日</em><i></i>
		</a>
		</span> <span id="scl1"></span> <span id="sctr2"></span><span id="sctr2"></span><span
			id="sctr3"></span><span id="sctr4"></span><span id="sctr5"></span><span
			id="sctr6"></span><span id="sctr7"></span><span id="sctr8"></span>
	</div>
	<div id="dvContainer">


		<table class="form-table selector" id="searchTable">
			<tr id="tr1">
				<td class="td1">选择日期：</td>
				<td class="td2" style="position: relative;" colspan="2">

					<div id="dateSelector" style="position: absolute;left:2px;top:0px;">
						<select id="idYear" name="idYear" data="" data-width="80px"
							onchange="changeSearchConditionByDate(this,1)"
							data-allow-empty="false" data-width="100px"></select>年 <select
							data-width="80px" id="idMonth" name="idMonth" data=""
							data-width="100px" onchange="changeSearchConditionByDate(this,2)"
							data-allow-empty="false"></select>月 <select id="idDay"
							data-width="80px" data-width="100px" name="idDay" data=""
							data-allow-empty="true"
							onchange="changeSearchConditionByDate(this,3)"></select>日
					</div>
				</td>

			</tr>
			<tr id="tr6">
				<td class="td1">解决时长：</td>
				<td class="td2"><div class="sl-v-list">
						<ul class="J_valueList sl-v-list"></ul>
					</div>
					<div class="sl-btns">
						<a href="javascript:;"
							class="btn btn-primary J_btnsConfirm disabled">确定</a><a
							href="javascript:;" class="btn btn-default J_btnsCancel">取消</a>
					</div></td>
				<td class="td3"><div class="sl-ext">
						<a href="javascript:;" class="sl-e-multiple J_extMultiple">多选<i></i>
						</a>
					</div></td>
			</tr>

			<tr id="tr5">
				<td class="td1">事件级别：</td>
				<td class="td2"><div class="sl-v-list">
						<ul class="J_valueList sl-v-list"></ul>
					</div>
					<div class="sl-btns">
						<a href="javascript:;"
							class="btn btn-primary J_btnsConfirm disabled">确定</a><a
							href="javascript:;" class="btn btn-default J_btnsCancel">取消</a>
					</div></td>
				<td class="td3"><div class="sl-ext">
						<a href="javascript:;" class="sl-e-multiple J_extMultiple">多选<i></i>
						</a>
					</div></td>
			</tr>

			<tr id="tr7">
				<td class="td1">SLA状态：</td>
				<td class="td2"><div class="sl-v-list">
						<ul class="J_valueList sl-v-list"></ul>
					</div>
					<div class="sl-btns">
						<a href="javascript:;"
							class="btn btn-primary J_btnsConfirm disabled">确定</a><a
							href="javascript:;" class="btn btn-default J_btnsCancel">取消</a>
					</div></td>
				<td class="td3"><div class="sl-ext">
						<a href="javascript:;" class="sl-e-multiple J_extMultiple">多选<i></i>
						</a>
					</div></td>
			</tr>
		</table>
		<div id="chart1" style="height:300px;"></div>

		<div class="header" style="font-size: 14px;padding:10px;color:#666">
			事件清单&nbsp;&nbsp;&nbsp;<small style="font-size: 12px;color: #888">共<label
				id="incidentCount">0</label>条记录
			</small>
		</div>

		<isperp:grid url="incident/search/analysisList?projectId=${projectId}"
			autoload="false" gridId="incidentSearchGrid" sortname="create_date"
			sortorder="desc" showSearchbar="true" showToolbar="false"
			cusViewUrl="incident/incident/view" configColumns="true"
			actionsWidth="90" ondbClickRowEvent="incidentSearchGrid.view(rowid);"
			cusActions="incidentGridActions(rowObject);"
			loadComplete=" $('#incidentCount').text( incidentSearchGrid.jqGrid.getGridParam('records'));isperp.loadMessageCount(data);">


			<jsp:body>
			<isperp:column name="id" title="" hidden="true">
			</isperp:column>
			<isperp:column name="process_id" title="" hidden="true">
			</isperp:column>
			<isperp:column name="sla_status" title="" hidden="true"></isperp:column>
			<isperp:column name="priority_name" title="" width="40"
					isFormatterFun="true"
					formatter="return statusFormatter(rowObject);">
			</isperp:column>	
			
			<isperp:column name="code" title="编号" width="110">
			</isperp:column>
			<isperp:column name="title" title="标题" width="120">
			</isperp:column>
			<isperp:column name="icd_category_name" title="系统" width="80">
			</isperp:column>
				<isperp:column name="incident_type" title="性质" width="50">
			</isperp:column>
			<isperp:column name="cus_user_name" title="申报人" width="60">
			</isperp:column>
			<isperp:column name="distributor_name" title="受理人" width="60">
			</isperp:column>
			<isperp:column name="supporter_name" title="工程师" width="60">
			</isperp:column>
			<isperp:column name="confirmtimeman_name" title="IS担当" width="60">
			</isperp:column>
			<isperp:column name="create_date" title="申报时间" width="110">
			</isperp:column>
			<isperp:column name="status" title="状态" width="80">
			</isperp:column>
			</jsp:body>
		</isperp:grid>

	</div>

</section>
<script type="text/javascript">
	var option = {
		title : {
			text : '近12小时故障申报趋势'
		},
		tooltip : {
			trigger : 'axis'
		},
		legend : {
			data : [ '申报数', '解决数' ]
		},
		toolbox : {
			show : true,
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : [ 'line', 'bar' ]
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		},
		calculable : true,
		xAxis : [ {
			type : 'category',
			boundaryGap : false,
			data : [ '11-04/01', '11-04/02', '11-04/03', '11-04/04', '11-04/05', '11-04/06', '11-04/07', '11-04/08', '11-04/09', '11-04/10', '11-04/11', '11-04/12' ]
		} ],
		yAxis : [ {
			type : 'value',
			axisLabel : {
				formatter : '{value}'
			}
		} ],
		series : [ {
			name : '申报数',
			type : 'line',
			data : [ 11, 11, 15, 13, 12, 13, 10 ],
			markPoint : {
				data : [ {
					type : 'max',
					name : '最大值'
				}, {
					type : 'min',
					name : '最小值'
				} ]
			},
			markLine : {
				data : [ {
					type : 'average',
					name : '平均值'
				} ]
			}
		}, {
			name : '解决数',
			type : 'line',
			data : [ 1, 4, 2, 5, 3, 2, 0 ],
			markPoint : {
				data : [ {
					name : '最低',
					value : 1,
					xAxis : 1,
					yAxis : -1.5
				} ]
			},
			markLine : {
				data : [ {
					type : 'average',
					name : '平均值'
				} ]
			}
		} ]
	};

	var chart1 = echarts.init(document.getElementById("chart1"));
	chart1.setOption(option, true);

	var myDate = new Date();
	$("#dateSelector").DateSelector({
		ctlYearId : 'idYear',
		ctlMonthId : 'idMonth',
		ctlDayId : 'idDay',
		defYear : myDate.getFullYear(),
		defMonth : (myDate.getMonth() + 1),
		defDay : myDate.getDate(),
		minYear : 2005,
		maxYear : (myDate.getFullYear() + 1)
	});

	function statusFormatter(rowObject) {
		var p = 0, html = "", title = "";
		if (rowObject.priority_name != null) {

			switch (rowObject.priority_name) {
			case "一级":
				p = 1;
				break;
			case "二级":
				p = 2;
				break;
			case "三级":
				p = 3;
				break;
			case "四级":
				p = 4;
				break;
			case "五级":
				p = 5;
				break;
			}
			title = "优先级：" + p + "级";
		} else {
			title = "未确定优先级";
		}

		html = "<img title='"+title+"' src='img/incident/p"+p+".png'>";
		if (rowObject.sla_status == 1) {

			html = html + "&nbsp;<img title='SLA：异常'  src='img/incident/sla_unusual.png'>";
		}
		return html + "&nbsp;<a id='msg_" + rowObject.id + "' href=\"javascript:openRelationMessage('" + rowObject.id + "')\" class=''></a>";
	}

	function openRelationMessage(id) {

		isperp.openDialog({
			title : "查看消息",
			contentUrl : "app/message/relationMessageView?all=1&sourceId=" + id
		});
	}

	var getScrollY = function() {
		scrOfY = 0;
		if (typeof (window.pageYOffset) == "number") {
			scrOfY = window.pageYOffset;
		} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
			scrOfY = document.body.scrollTop;
		} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
			scrOfY = document.documentElement.scrollTop;
		}
		return scrOfY;

	}

	var pos_fixed_start_y = 0;
	var pos_fixed_stop_y = $(document).height() - $(window).height();
	$(window).scroll(function() {

		var y = getScrollY();

		if (y == 0) {
			$("#dvFrameMainNav").css({
				height : 'auto'
			});
		}
		var nav = $('#dvFrameMainNav');
		if (y >= pos_fixed_start_y && y <= pos_fixed_stop_y) {
			nav.addClass('fixed');
			resetTagTreeHeight();
		} else if (y > pos_fixed_stop_y) {
			nav.addClass('fixed');
			resetTagTreeHeight2();
		} else {
			nav.removeClass('fixed');
		}
	});

	var resetTagTreeHeight = function() {
		var tt = $("#dvFrameMainNav");
		var height = $(window).height();
		tt.css({
			height : height
		});
	};

	var resetTagTreeHeight2 = function() {
		var tt = $("#dvFrameMainNav");
		var height = $(window).height();
		tt.css({
			height : height
		});
	};

	resetTagTreeHeight2();
	reloadGrid();

	//-----------------------------------------------

	$(function() {
		$(".J_extMultiple").click(function() {
			$(".selector td").removeClass("multiple");
			$(this).parent().parent().prev().addClass("multiple");
		});

		$(".J_btnsCancel").click(function() {

			$(this).parent().parent().removeClass("multiple");

		});

		$(".J_btnsConfirm").click(function() {
			if ($(this).hasClass("disabled")) {

				return false;
			} else {
				var trid = $(this).parent().parent().parent().attr("id");

				var $tr = $("#searchTable #" + trid), namelabel = $tr.find(".td1").text();
				var v = "";

				$tr.find(".selected a").each(function(index, item) {
					if (index > 0)
						v += "," + $(item).data("value");
					else {
						v += $(item).data("value");
					}
				});

				$("#sc" + trid).html(renderTemplate(trid, namelabel, v, v));

				$tr.find(".td2").removeClass("multiple");

				reloadGrid();
			}

		});

	});
</script>